<template>
  <van-cell-group inset>

    <div style="margin: 0 5%">
      <div className="my1" style="margin-top: 30%">
        <van-field label="账号" placeholder="请输入用户名" v-model="registerInfo.userAccount"/>
      </div>
      <div className="my1">
        <van-field label="密码" type="password" placeholder="请输入密码" v-model="registerInfo.userPassword"/>
      </div>
      <div className="my1">
        <van-field label="确认密码" type="password" placeholder="请确认密码" v-model="registerInfo.checkPassword"/>
      </div>
      <div className="my1 my2">
        <van-button type="primary" size="large" round @click="onRegister">
          注册
        </van-button>
      </div>

      <div className="my1">
        <van-loading
            color="#1989fa"
            vertical size="15%"
            v-show="isLoading"
        />
      </div>
    </div>
  </van-cell-group>
</template>

<script setup>
import {ref} from "vue";
import {registerUser} from "../config/globalConfig";
import {userRegister} from "../api/request";
import {Toast} from "vant";

const isLoading = ref(false)
const registerInfo = ref(registerUser)
const onRegister = async () => {
  isLoading.value = true
  userRegister(registerInfo.value).then((res) => {
    res = res.data
    if (res.statusCode === 0) {
      Toast('注册成功')
    } else {
      console.log(res)
      Toast(res.description)
    }
  }).catch((err) => {
    Toast('注册失败')
    console.log(err)
  }).finally(() => {
    isLoading.value = false
  })
}

</script>

<style scoped>
.my1 {
  margin-top: 30px;
}

.my2 {
}
</style>